<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .dialog {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 5px 5px 10px #555;
        padding: 10px 20px;
      }

      .content {
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
      }
      .video-box {
        display: flex;
        flex-wrap: wrap;
        height: 700px;
        width: 1200px;
      }
      .video-item {
        position: relative;
        width: calc(33.3333% - 2px);
        height: 33.3333%;
        /* background-color: #eee; */
        border: 1px solid #eee;
        margin-top: -1px;
      }
      .delete-i {
        position: absolute;
        right: 5px;
        top: 0;
        color: red;
        line-height: 1em;
      }
      .video-item:not(:nth-child(3n)) {
        margin-right: -1px;
      }
      .focus {
        box-shadow: inset 0 0 5px yellow;
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- <template id="app1">
      <div class="content">
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          @check-change="setCheckArr"
          highlight-current
          :props="defaultProps"
        >
        </el-tree>
        <video-box
          :focus="focus"
          :check-arr="checkArr"
          @update-focus="updateFocus"
          @close-item="closeItem"
        ></video-box>
        <button @click="a++">+</button>
        {{a}}
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409EFF"
          mode="horizontal"
        >
          <el-menu-item index="1">处理中心</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="3" disabled>消息中心</el-menu-item>
          <el-menu-item index="4">订单管理 </el-menu-item>
        </el-menu>
      </div>
    </template> -->

    <template id="app1">
      <div>
        <!-- <virtual-list :size="20" :remain="10">
          <p v-for="item of items" :key="item.id">{{item}}</p>
        </virtual-list> -->
      </div>
    </template>

    <!-- 引入样式 -->
    <!-- 引入组件库 -->
    <script src="../../dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroll-list@1.4.7/dist/index.min.js"></script> -->
    <!-- dialog -->
    <!-- <script type="module">
      import Dialog from "./components.js";
      window.vm = new Vue({
        el: "#app",
        // template: "#app1",
        template:
          "<div><h1 > {{msg}} </h1><h2 > {{msg}} </h2><h1 > {{abc}} </h1><h4>{{arr}}</h4><button @click='changeArr'>push</button></div>",
        // render(h) {
        //   return h("h1", { on: { click: this.clickThis } }, [
        //     this.msg,
        //     h("foo"),
        //   ]);
        // },
        provide() {
          return { abc: this.abc };
        },
        data: {
          msg: "hello word",
          inputMin: null,
          inputMax: null,
          abc: {
            a: {
              b: {
                c: 123,
              },
            },
            b: 111,
          },
          arr: [1, 2, 3, 4, 5, 6],
        },
        beforeCreate() {
          //   console.log(this.abc); // 无法访问data中的数据
        },
        mounted() {
          setTimeout(() => {
            // this.abc.a = "word hello";
            this.arr[0] = 10;

            setTimeout(() => {
              this.arr[0] = 5;
            }, 1000);
          }, 2000);
        },
        methods: {
          changeArr() {
            let narr = [...this.arr]
            narr.push(Math.random())
            this.arr = narr
            this.abc.b = 321
          },
          clickThis() {
            this.fshow();
            setTimeout(() => {
              Dialog.closeAll();
            }, 2000);
          },
          fshow() {
            for (let i = 1; i > 0; i--) {
              Dialog({ type: "success", msg: `这是第${i}个` });
            }
          },
        },
        watch: {
          'abc.b' (val, oldVal) {
              console.log(val);
              console.log(oldVal);
          },
          //   arr: {
          //     deep: true,
          //     handler(val, oldVal) {
          //       console.log(val);
          //       console.log(oldVal);
          //     },
          //   },
          arr(val, oldVal) {
            console.log(val);
            console.log(oldVal);
          },
        },
      });

      //   console.log(vm);
    </script> -->

    <!-- el-tree -->
    <!-- <script type="module">
      import videoBox from "./video.js";
      window.vm = new Vue({
        el: "#app",
        template: "#app1",
        components: {
          videoBox,
        },
        methods: {
          setCheckArr(node, boolen) {
            // 获取到的节点为叶子节点才进行下一步
            if (!node || node.children) return;
            // boolen为true就需要添加的节点
            if (boolen) {
              // 判断当前节点是否存在于原数组中
              let exist = this._isExist(node);
              // 存在就不再添加 不存在就添加
              if (!exist) {
                // 使用loop来判断当前是点击设置的focus还是循环设置的 点击设置的就修改当前点击的元素
                if (this.loop) {
                  // 目前最多允许同时加9个节点， 之后会动态设置
                  this.focus >= 8 ? (this.focus = 0) : this.focus++;
                  // 当前focus存在元素并数组中有其他空位置 则找到空位赋值给focus
                  for (let i = 0; i < 9; i++) {
                    !this.checkArr[i] &&
                      this.checkArr[this.focus] &&
                      (this.focus = i);
                  }
                }
                // 没有空位了 数组下标为focus的元素存在 将其替换为当前元素 并在tree中回显
                this.checkArr[this.focus] &&
                  this.closeItem(this.checkArr[this.focus]);
                this.checkArr.splice(this.focus, 1, node);
                // 修改focus为循环设置
                this.loop = true;
              }
              // 为false就需要移出的节点
            } else {
              // 判断当前节点是否存在于原数组中 存在就删除
              this._deleteItem(node);
            }
          },
          // 删除节点
          _deleteItem(node) {
            this.checkArr.forEach((item, index) => {
              if (item && item.id === node.id) {
                this.checkArr.splice(index, 1, undefined);
                this.focus = index;
              }
            });
            // 这里将focus设置方式改为点击
            this.loop = false;
            // checkArr为空 则焦点回到指针位置
            let length = this.checkArr.filter((item) => item && item.id).length;
            if (length === 0) {
              this.focus = this.pointer;
            }
          },
          // 节点是否存在于原数组中
          _isExist(node) {
            return (
              0 <
              this.checkArr.filter((item) => {
                return item && item.id === node.id;
              }).length
            );
          },
          // 修改焦点、指针和设置方式
          updateFocus(i) {
            this.focus = i;
            this.pointer = i;
            this.loop = false;
          },
          closeItem(node) {
            // 判断当前节点是否存在于原数组中 存在就删除
            this._deleteItem(node);
            // 将tree中相同的数据回删除（取消勾选）
            this.$refs.tree.setChecked(node, false);
          },
        },
        data() {
          return {
            activeIndex: "1",
            checkArr9: new Array(9),
            checkArr: new Array(9),
            focus: 0,
            loop: false,
            pointer: 0,
            cTime: null,
            data: [
              {
                id: 1,
                label: "一级 1",
                children: [
                  {
                    id: 4,
                    label: "二级 1-1",
                    children: [
                      {
                        id: 9,
                        label: "三级 1-1-1",
                      },
                      {
                        id: 10,
                        label: "三级 1-1-2",
                      },
                      {
                        id: 11,
                        label: "三级 1-1-3",
                      },
                      {
                        id: 12,
                        label: "三级 1-1-4",
                      },
                      {
                        id: 13,
                        label: "三级 1-1-5",
                      },
                      {
                        id: 14,
                        label: "三级 1-1-6",
                      },
                      {
                        id: 15,
                        label: "三级 1-1-7",
                      },
                      {
                        id: 16,
                        label: "三级 1-1-8",
                      },
                      {
                        id: 17,
                        label: "三级 1-1-9",
                      },
                      {
                        id: 18,
                        label: "三级 1-1-10",
                      },
                    ],
                  },
                ],
              },
              {
                id: 2,
                label: "一级 2",
                children: [
                  {
                    id: 5,
                    label: "二级 2-1",
                  },
                  {
                    id: 22,
                    label: "二级 2-2",
                  },
                  {
                    id: 23,
                    label: "二级 2-3",
                  },
                  {
                    id: 24,
                    label: "二级 2-4",
                  },
                ],
              },
              {
                id: 3,
                label: "一级 3",
                children: [
                  {
                    id: 7,
                    label: "二级 3-1",
                  },
                  {
                    id: 8,
                    label: "二级 3-2",
                  },
                ],
              },
            ],
            defaultProps: {
              children: "children",
              label: "label",
            },
          };
        },
      });
      //   console.log(vm);

      //   class User {
      //     sex = "男"; // 实例属性
      //     constructor(name) {
      //       this.name = name;
      //     }
      //     static age = 21; // 静态属性
      //     // 静态方法
      //     static eat() {
      //       return "eating";
      //     }
      //     // 实例方法
      //     run() {
      //       return " runing";
      //     }
      //   }

      //   function User(name) {
      //     this.sex = "男";
      //     this.name = name;
      //   }
      //   User.prototype.run = function () {
      //     return " runing";
      //   };
      //   User.eat = function () {
      //     return "eating";
      //   };
      //   User.age = 21;

      //   window.User = User;
      //   window.as = new User("wlz");

      //   console.dir(User);
      //   console.dir(as);

      //   setTimeout(() => {
      //     User.prototype.look = function () {
      //       return "look";
      //     };
      //   }, 2000);
    </script> -->

    <!-- <script type="module">
      window.vm = new Vue({
        el: "#app",
        template: "#app1",
        data: {
          items: [],
        },
        mounted(){
            for (let i = 0; i < 10000; i++) {
                this.items.push({id: i})
            }
        },
      });
    </script> -->

    <script type="module">
      window.vm = new Vue({
        el: "#app",
        template: "#app1",
        data: {
          items: [],
        },
        mounted() {
          this.$notify({
            title: "提示",
            message: "这是一条不会自动关闭的消息",
            duration: 0,
          });
          setTimeout(() => {
            this.$notify.closeAll()
            this.$notify({
            title: "提示1",
            message: "这是一条不会自动关闭的消息",
            duration: 0,
          });
          }, 2000);
        },
      });
    </script>
  </body>
</html>
